<template>
  <div>
    <el-calendar v-model="value">
      <!-- <template #dateCell="{ data }"> ===={{ data.type }}</template> -->
      <template v-slot:dateCell="{ date }">
        <span class="fath"> {{ isDate(date) }}</span>
        <span v-if="isWeek(date)" class="week">休</span>
      </template>
    </el-calendar>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      value: new Date()
    }
  },
  computed: {},
  created() {},
  methods: {
    isDate(d) {
      return d.getDate() //  获取当天的日期
    },
    isWeek(d) {
      var day = d.getDay() //  获取的是星期
      if (day === 0 || day === 6) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.week {
  display: inline-block;
  background-color: #f8794d;
  border-radius: 50%;
  font-size: 12px;
  padding: 3px;
  color: #fff;
  // text-align: center;
  margin-left: 5px;
  margin-top: 10px !important;
}
.fath {
  display: inline-block;
  margin-left: 40px;
  margin-top: 30px;
}
</style>
